<template>
    <!-- 使用Element Plus的el-descriptions组件展示个人信息 -->
    <el-descriptions class="margin-top" title="个人信息" :column="1" :size="size" border>
        <!-- 用户昵称信息 -->
        <el-descriptions-item>
            <!-- 用户信息包含一个图标和一个文本标签 -->
            <template #label>
                <div class="cell-item">
                    <!-- 使用Element Plus的user图标 -->
                    <el-icon>
                        <user />
                    </el-icon>
                    昵称
                </div>
            </template>
            <!-- 显示用户昵称，如果mine存在就显示其username属性 -->
            {{ mine?.username }}
        </el-descriptions-item>
        <!-- 电话号码信息 -->
        <el-descriptions-item>
            <!-- 用户联系方式中包含一个图标和一个文本标签 -->
            <template #label>
                <div class="cell-item">
                    <!-- 使用Element Plus的iphone图标 -->
                    <el-icon>
                        <iphone />
                    </el-icon>
                    电话号码
                </div>
            </template>
            <!-- 显示用户电话号码，如果mine存在就显示其phone属性 -->
            {{ mine?.phone }}
        </el-descriptions-item>
        <!-- 显示省份信息 -->
        <el-descriptions-item>
            <!-- 省份信息展示中包含一个图标和一个文本标签 -->
            <template #label>
                <div class="cell-item">
                    <!-- 使用Element Plus的location图标 -->
                    <el-icon>
                        <location />
                    </el-icon>
                    省份
                </div>
            </template>
            <!-- 显示用户所在省份的信息 -->
            {{ province }}
        </el-descriptions-item>
        <!-- 显示用户余额信息 -->
        <el-descriptions-item>
            <!-- 余额信息展示中包含一个图标和一个文本标签 -->
            <template #label>
                <div class="cell-item">
                    <!-- 使用Element Plus的Mony图标 -->
                    <el-icon>
                        <Money />
                    </el-icon>
                    我的余额
                </div>
            </template>
            <!-- 显示用户余额信息，如果mine存在就显示其money属性 -->
            {{ mine?.money }}
        </el-descriptions-item>
        <!-- 显示账号注册时间信息 -->
        <el-descriptions-item>
            <!-- 注册时间信息展示中包含一个图标和一个文本标签 -->
            <template #label>
                <div class="cell-item">
                    <!-- 使用Element Plus的clock图标 -->
                    <el-icon>
                        <clock />
                    </el-icon>
                    账号注册时间
                </div>
            </template>
            <!-- 显示用户账号注册时间信息 -->
            {{ createTime }}
        </el-descriptions-item>
        <!-- 展示最近登陆时间信息 -->
        <el-descriptions-item>
            <!-- 最近登录时间信息展示中包含一个图标和一个文本标签 -->
            <template #label>
                <div class="cell-item">
                    <!-- 使用Element Plus的clock图标 -->
                    <el-icon>
                        <clock />
                    </el-icon>
                    最近登陆时间
                </div>
            </template>
            <!-- 显示最近登录时间 -->
            {{ latestTime }}
        </el-descriptions-item>
        <!-- 展示登陆IP信息 -->
        <el-descriptions-item>
            <!-- 登录IP信息展示中包含一个图标和一个文本标签 -->
            <template #label>
                <div class="cell-item">
                    <!-- 使用Element Plus的aim图标 -->
                    <el-icon>
                        <aim />
                    </el-icon>
                    登陆IP
                </div>
            </template>
            <!-- 显示登录IP地址 -->
            {{ ip }}
        </el-descriptions-item>
    </el-descriptions>
    <!-- 退出账号按钮 -->
    <el-row style="align-content: center;width: 100%;" justify="center">
        <el-col :span="12">
            <!-- 定义一个退出账号的按钮，对背景颜色，字体颜色以及按键宽度进行限制 -->
            <el-button style="background-color: red;color: white; width: 60%;margin-top: 10%;"
                @click="logOut">退出账号</el-button>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
// 导入Vue的组合式API函数onMounted和ref
import { onMounted, ref } from 'vue'
// 导入Element Plus的图标组件
import {
    Iphone,
    Location,
    Clock,
    Aim,
    User,
    Money,
} from '@element-plus/icons-vue'
// 导入Element Plus的ComponentSize类型
import type { ComponentSize } from 'element-plus'
// 导入用户信息存储模块
import { userInfoStore } from '../assets/userStore/userStore';
// 导入路由器模块
import router from '../router';
// 导入用户模型
import { UserModel } from '../assets/models/User';
// 导入网络API模块
import { netApis } from '../assets/apis/NetApis';
// 导入用户API模块
import { userApis } from '../assets/apis/UserApis';
// 导入AGC API模块
import { agcApis } from '../assets/apis/AgcApis';

// 创建响应式变量存储用户信息、省份、IP地址、创建时间和最后登录时间
// 获取用户信息存储实例
const userStore = userInfoStore()
// 将组件大小设置为大号
const size = ref<ComponentSize>('large')
// 初始化IP地址响应式变量
const ip = ref<string>();
// 初始化省份响应式变量
const province = ref<string>();
// 初始化用户信息响应式变量
const mine = ref<UserModel>();
// 初始化创建时间响应式变量
const createTime = ref();
// 初始化最后登录时间响应式变量
const latestTime = ref();

onMounted(() => {
    // 获取IP地址并赋值给ip变量
    netApis.getIp().then((value: string) => {
        // 设置IP地址
        ip.value = value;
    })
    // 获取省份并赋值给province变量
    netApis.getProvince().then((value: string) => {
        // 设置省份信息
        province.value = value;
    })
    // 根据用户ID查询用户信息
    userApis.queryUser(userStore.id)
        // 成功获取用户信息后执行此回调函
        .then((value) => {
            // 设置用户信息
            mine.value = value;
            // 打印用户信息
            console.log(value);
        })

    // 延迟200毫秒后执行以下操作：获取当前用户并设置其创建时间和最后登录时间
    setTimeout(() => {
        // 获取当前用户信息
        agcApis.getCurrectUser()
            // 成功获取当前用户信息后执行此回调函数
            .then((value) => {
                // 获取用户额外信息并执行此回调函数
                value?.getUserExtra().then((value) => {
                    // 格式化并设置创建时间
                    createTime.value = new Date(Number(value?.getCreateTime())).toLocaleString()
                    // 格式化并设置最后登录时间
                    latestTime.value = new Date(Number(value?.getLastSignInTime())).toLocaleString()
                })
            })
        // 设置延迟时间为200毫秒
    }, 200)
})

// 定义退出账号的方法：调用API退出登录并重定向到首页
// 定义logOut函数用于退出账号
const logOut = () => {
    // 调用API退出登录
    agcApis.logOut();
    // 重定向到首页
    router.replace('/');
}
</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>